<template>
  <div class="layout_left">
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#2d353c"
      :default-active="$route.path"
      text-color="#ffffff"
      active-text-color="#ffffff"
      unique-opened
      router
    >
      <!-- 头像 -->
      <div class="information">
        <div class="information_box">
          <el-avatar :src="Headimg"></el-avatar>
          <div class="information_text">
            <span>达人邦</span>
          </div>
        </div>
      </div>
      <!-- 渲染列表页 -->
      <template>
        <el-menu-item
          v-for="item in noChildren"
          :index="item.path"
          :key="item.path"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>

        <el-submenu
          :index="item.index"
          v-for="item in hasChildren"
          :key="item.index"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="item2.path"
              v-for="(item2, index2) in item.children"
              :key="index2"
              >{{ item2.title }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import Headimg from "../assets/img/touxiang.jpg";
export default {
  name: "",
  props: [""],
  data() {
    return {
      items: [
        {
          icon: "el-icon-s-open",
          index: "1",
          title: "首页",
          path: "/",
        },
        {
          icon: "el-icon-rank",
          index: "2",
          title: "风控中心",
          children: [
            {
              index: "2.1",
              title: "下单用户",
              icon: "el-icon-s-open",
              path: "/OrderUser",
            },
            {
              index: "2.2",
              title: "敏感词库",
              icon: "el-icon-s-open",
              path: "/Sensitivity",
            },
          ],
        },
        {
          icon: "el-icon-rank",
          index: "3",
          title: "店铺",
          children: [
            {
              index: "3.1",
              title: "店铺信息",
              icon: "el-icon-s-open",
              path: "/StoreInformation",
            },
            {
              index: "3.2",
              title: "账号管理",
              icon: "el-icon-s-open",
              path: "/Account",
            },
            {
              index: "3.3",
              title: "品牌管理",
              icon: "el-icon-s-open",
              path: "/Brand",
            },
            {
              index: "3.4",
              title: "店铺装修",
              icon: "el-icon-s-open",
              path: "/Decorate",
            },
            {
              index: "3.5",
              title: "分类管理",
              icon: "el-icon-s-open",
              path: "/CssAdmin",
            },
          ],
        },
        {
          icon: "el-icon-rank",
          index: "4",
          title: "商品管理",
          children: [
            {
              index: "4.1",
              title: "商城列表",
              icon: "el-icon-s-open",
              path: "/GoodsList",
            },
            {
              index: "4.2",
              title: "添加新商品",
              icon: "el-icon-s-open",
              path: "/AddGoods",
            },
            {
              index: "4.3",
              title: "商品品牌",
              icon: "el-icon-s-open",
              path: "/Recycle",
            },
            {
              index: "4.4",
              title: "商品分类",
              icon: "el-icon-s-open",
              path: "/Inventory",
            },
            {
              index: "4.5",
              title: "自定义规格",
              icon: "el-icon-s-open",
              path: "/Custom",
            },
          ],
        },
        {
          icon: "el-icon-rank",
          index: "5",
          title: "物流中心",
          children: [
            {
              index: "5.1",
              title: "物流设置",
              icon: "el-icon-s-open",
              path: "/Logistics",
            },
            {
              index: "5.2",
              title: "物流模板",
              icon: "el-icon-s-open",
              path: "/LogisticsTemplate",
            },
          ],
        },
        {
          icon: "el-icon-rank",
          index: "6",
          title: "订单中心",
          children: [
            {
              index: "6.1",
              title: "订单列表",
              icon: "el-icon-s-open",
              path: "/OrderClass",
            },
            {
              index: "6.3",
              title: "拼团订单",
              icon: "el-icon-s-open",
              path: "/GroupOrder",
            },
            {
              index: "6.4",
              title: "退单列表",
              icon: "el-icon-s-open",
              path: "/RetiredList",
            },
            {
              index: "6.5",
              title: "售后订单",
              icon: "el-icon-s-open",
              path: "/SalesOrder",
            },
          ],
        },
      ],
      Headimg: Headimg,
    };
  },

  components: {},

  computed: {
    // tab过滤进行遍历循环
    noChildren() {
      return this.items.filter((item) => !item.children);
    },
    hasChildren() {
      return this.items.filter((item) => item.children);
    },
  },

  beforeMount() {},

  mounted() {
    // bus.$on("collapse", (msg) => {
    //   this.isCollapse = msg;
    // });
  },

  methods: {
    handleOpen(key, keyPath, one) {
      // console.log(key);
      // console.log(keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.layout_left {
  width: 200px;
  height: 100vh !important;
  .el-menu-vertical-demo {
    height: 100% !important;
  }
}
.el-menu-item.is-active {
  background-color: #00acac !important;
}
.el-submenu .el-menu-item {
  padding-left: 30px !important;
  min-width: 0;
  text-align: center;
}

.information {
  height: 70px !important;
  background: #1a2229;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  .information_box {
    display: flex;
    .information_text {
      font-size: 14px;
      line-height: 40px;
      margin-left: 10px;
    }
  }
}
</style>
